<script lang="ts" setup>
import { computed, ref } from 'vue'
import { CabinetBikeTablePageType } from '@/types/enum'
// import { copyEvent } from '@/utils'
import { useRouter } from 'vue-router'
import StoreInfo from '@/components/popover/StoreInfo.vue'
import { bikeOnlineStatus } from '@/utils/formatter'
import CabinetInfo from '@/components/dialog/CabinetInfo.vue'
import { queryBoxTableCol } from '@/api/cabinet/types/cabinet'
const props = defineProps<{
  data: Array<any>
  page: CabinetBikeTablePageType
  loading: boolean
}>()
const router = useRouter()
const isCabinetList = computed(() => {
  return props.page == 'cabinetList'
})
const cabinetAdress = (row: queryBoxTableCol) => {
  router.push({
    name: 'CabinetLocation',
    query: {
      longtitude: row.longtitude,
      latitude: row.latitude,
      boxId: row.boxId
    }
  })
}
/** 查看所属门店 弹出框 */
const operatorsInfo = (row: queryBoxTableCol) => {
  router.push({
    name: 'OperatorsInfo',
    query: {
      merchantId: row.store?.merchantId,
      storeId: row.store?.storeId
    }
  })
}
/** 查看操作记录  */
const showReocrd = (row: queryBoxTableCol) => {
  router.push({
    name: 'CabinetRecord',
    query: {
      boxCode: row.boxCode
    }
  })
}
/** 查看报警记录  */
// const showAlarmRecord = (row: queryBoxTableCol) => {
//   router.push({
//     name: 'AlarmRecord',
//     query: {
//       boxId: row.boxId
//     }
//   })
// }
/** 查看换电记录  */
// const showHdRecord = (row: queryBoxTableCol) => {
//   router.push({
//     name: 'HdRecord',
//     query: {
//       boxId: row.boxId,
//       usePage: 'cabinet'
//     }
//   })
// }
/** 查看开仓记录  */
// const showOpenDoorRecord = (row: queryBoxTableCol) => {
//   router.push({
//     name: 'OpenDoorRecord',
//     query: {
//       boxId: row.boxId
//     }
//   })
// }
/** 查看电柜信息  */
const cabinetInfoRef = ref<InstanceType<typeof CabinetInfo> | null>(null)
const showCabinetInfo = (row: queryBoxTableCol) => {
  cabinetInfoRef.value?.setId(row.boxId)
  cabinetInfoRef.value?.open()
}
</script>

<template>
  <el-table :data="data" class="no-border" v-loading="loading">
    <el-table-column prop="boxCode" label="电柜编号" align="center" />
    <el-table-column prop="battery60VCount" label="60V可用" align="center" />
    <el-table-column prop="battery48VCount" label="48V可用" align="center" />
    <el-table-column prop="doorCount" label="仓门数" align="center" />
    <el-table-column
      prop="boxOnlineStatus"
      label="网络状态"
      :formatter="bikeOnlineStatus"
      align="center"
    />
    <el-table-column prop="masterBatteryLevel" label="一号仓电量" min-width="150" align="center">
      <template #default="scope">
        <span
          v-if="scope.row.masterBatteryLevel"
          :style="{
            color:
              scope.row.masterBatteryLevel > 20
                ? 'var(--xy-success-color)'
                : 'var(--xy-warning-color)'
          }"
          >{{ scope.row.masterBatteryLevel }}%</span
        >
      </template>
    </el-table-column>
    <!-- <el-table-column prop="boxLockId" label="中控编号" />
    <el-table-column prop="cameraId" label="监控条码号" width="100">
      <template #default="scope">
        <el-tooltip>
          <template #content>
            <span>{{ scope.row.cameraId }}</span>
            <el-button link type="primary" @click="copyEvent(scope.row.cameraId)">复制</el-button>
          </template>
          <span>{{ scope.row.cameraId }}</span>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column prop="boxName" label="电柜名称" /> -->
    <el-table-column label="电柜定位" align="center">
      <template #default="scope">
        <el-button link type="primary" class="is-show" @click="cabinetAdress(scope.row)"
          >查看</el-button
        >
      </template>
    </el-table-column>
    <!-- <el-table-column prop="remark" label="位置备注" /> -->
    <el-table-column label="所属门店" v-if="isCabinetList" fixed="right" align="center">
      <template #default="scope">
        <el-popover
          v-if="scope.row.store"
          trigger="hover"
          popper-class="store-info_popover"
          width="210px"
        >
          <store-info :data="scope.row.store" :is-divider="true">
            <template #button>
              <el-button plain link w-full @click="operatorsInfo(scope.row)">进入门店 ></el-button>
            </template>
          </store-info>
          <template #reference>
            <el-button link class="is-show" type="primary">查看</el-button>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="电柜记录" fixed="right" align="center">
      <template #default="scope">
        <el-button link type="primary" class="is-show" @click="showReocrd(scope.row)"
          >查看</el-button
        >
      </template>
    </el-table-column>
    <!-- <el-table-column label="报警记录" fixed="right">
      <template #default="scope">
        <el-button link type="primary" @click="showAlarmRecord(scope.row)">查看</el-button>
      </template>
    </el-table-column>
    <el-table-column label="换电记录" fixed="right">
      <template #default="scope">
        <el-button link type="primary" @click="showHdRecord(scope.row)">查看</el-button>
      </template>
    </el-table-column>
    <el-table-column label="开仓记录(客服)" v-if="isCabinetList" width="150" fixed="right">
      <template #default="scope">
        <el-button link type="primary" @click="showOpenDoorRecord(scope.row)">查看</el-button>
      </template>
    </el-table-column> -->
    <el-table-column label="电柜信息" fixed="right" align="center">
      <template #default="scope">
        <el-button link type="primary" class="is-open" @click="showCabinetInfo(scope.row)"
          >查看</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <cabinet-info ref="cabinetInfoRef" />
</template>

<style scoped></style>
